<template>
  <div class="join-us-page">
    <h1 class="page-title">我要加盟</h1>

    <!-- 主要内容区域：图片和按钮 -->
    <div class="main-content">
      <div class="join-images">
        <div class="image-container">
          <img src="../assets/images/1.jpg" alt="加盟优势展示" class="join-image">
        </div>
        <div class="image-container">
          <img src="../assets/images/2.jpg" alt="加盟流程说明" class="join-image">
        </div>
        <div class="image-container">
          <img src="../assets/images/3.jpg" alt="加盟支持政策" class="join-image">
        </div>
      </div>

      <!-- 加盟按钮 -->
      <div class="cta-container">
        <button class="join-button" @click="showForm = true" :class="{ 'pulse-animation': !showForm }">
          <!-- <i class="fas fa-handshake"></i>  握手图标，看不见，所以注释 -->
          立即加盟
        </button>
        <p class="button-caption">填写信息，开启合作之旅</p>
      </div>
    </div>

    <!-- 加盟表单浮窗 -->
    <div class="modal-overlay" v-if="showForm" @click.self="showForm = false">
      <div class="modal-content">
        <div class="modal-header">
          <h2>加盟申请表</h2>
          <button class="close-button" @click="closeModal">&times;</button>
        </div>
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" v-model="formData.email" placeholder="请输入您的邮箱">
          </div>
          <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" id="name" v-model="formData.name" required placeholder="请输入您的姓名">
          </div>
          <div class="form-group">
            <label for="phone">手机号</label>
            <input type="tel" id="phone" v-model="formData.phone" placeholder="请输入您的手机号">
          </div>
          <div class="form-group">
            <label for="address">通讯地址</label>
            <input type="text" id="address" v-model="formData.address" required placeholder="请输入您的通讯地址">
          </div>
          <div class="form-group">
            <label for="order">请填写您要订购的产品及数量等信息</label>
            <textarea id="order" v-model="formData.order" required placeholder="请详细描述您要订购的产品及数量"></textarea>
          </div>
          <div class="form-group">
            <label for="notes">备注信息</label>
            <textarea id="notes" v-model="formData.notes" required placeholder="可填写其他需要说明的信息"></textarea>
          </div>
          <div class="form-actions">
            <button type="submit" class="submit-button" :disabled="isLoading">{{ isLoading ? '提交中...' : '提交信息' }}</button>
            <button type="button" class="reset-button" @click="resetForm">重置表单</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { postForm } from '@/apis/joinus'

const showForm = ref(false);
const isLoading = ref(false);

// 定义表单数据类型
interface FormData {
  email: string;
  name: string;
  phone: string;
  address: string;
  order: string;
  notes: string;
}

const formData = ref({
  email: '',
  name: '',
  phone: '',
  address: '',
  order: '',
  notes: '',
});

// 获取 CSRF 令牌的函数
const getCSRFToken = (): string => {
  const cookieValue = document.cookie
    .split('; ')
    .find(row => row.startsWith('csrftoken='))
    ?.split('=')[1] || '';
  return cookieValue;
};

const validateForm = (): boolean => {
  // 邮箱和手机号至少填一个
  if (!formData.value.email && !formData.value.phone) {
    alert('请填写邮箱或手机号码！');
    return false;
  }
  // 必填项校验
  if (!formData.value.name || !formData.value.address || !formData.value.order) {
    alert('请填写完整信息！');
    return false;
  }
  // 手机号校验（11位中国大陆手机号）
  if (
    formData.value.phone &&
    !/^1[3456789]\d{9}$/.test(formData.value.phone)
  ) {
    alert('请填写正确的手机号码！');
    return false;
  }
  // 邮箱校验
  if (
    formData.value.email &&
    !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(formData.value.email)
  ) {
    alert('请填写正确的邮箱地址！');
    return false;
  }
  return true;
};

// 提交表单到 Django 后端
const submitForm = async () => {
  if (!validateForm()) return; // 校验不通过不提交

  isLoading.value = true;
  try {
    await postForm(
      'http://localhost:8000/api/join/', // 本地开发环境
      {
        email: formData.value.email,
        name: formData.value.name,
        phone: formData.value.phone,
        address: formData.value.address,
        order_details: formData.value.order,
        notes: formData.value.notes,
      }
    );
    alert('申请提交成功！');
    showForm.value = false;
    resetForm();
  } catch (error: any) {
    alert('提交失败，请重试');
    console.error(error);
  } finally {
    isLoading.value = false;
  }
}

const resetForm = () => {
  formData.value = {
    email: '',
    name: '',
    phone: '',
    address: '',
    order: '',
    notes: '',
  };
};

const closeModal = () => {
  showForm.value = false;
  resetForm();
};
</script>

<style lang="scss" scoped>
.join-us-page {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.page-title {
  text-align: center;
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 15px;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #4a90e2, #ff6b9d);
  }
}

.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.join-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 600px;
}

.image-container {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }
}

.join-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.cta-container {
  text-align: center;
  width: 100%;
  max-width: 600px;
}

.join-button {
  background: linear-gradient(to right, #4a90e2, #ff6b9d);
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 1.2rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  
  &:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4);
  }
  
  i {
    font-size: 1.2em;
  }
}

.button-caption {
  margin-top: 10px;
  color: #666;
  font-size: 0.9rem;
}

// 按钮脉冲动画
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 157, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(255, 107, 157, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 157, 0);
  }
}

.pulse-animation {
  animation: pulse 2s infinite;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  
  h2 {
    color: #333;
    font-size: 1.5rem;
    margin: 0;
  }
}

.close-button {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  transition: color 0.2s ease;
  
  &:hover {
    color: #333;
  }
}

.form-group {
  margin-bottom: 20px;
  
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
  }
  
  input, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    transition: all 0.3s ease;
    
    &:focus {
      border-color: #4a90e2;
      outline: none;
      box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
    }
    
    &::placeholder {
      color: #aaa;
    }
  }
  
  textarea {
    min-height: 100px;
    resize: vertical;
  }
}

.form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  gap: 15px;
  
  button {
    padding: 12px 25px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
  }
  
  .submit-button {
    background: linear-gradient(to right, #4a90e2, #5aa0f0);
    color: white;
    border: none;
    
    &:hover {
      background: linear-gradient(to right, #3a7bc8, #4a90e2);
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(74, 144, 226, 0.3);
    }
  }
  
  .reset-button {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
    
    &:hover {
      background-color: #e5e5e5;
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
  }
}
</style>